@import "../../css/common.less";
.header-in {
    width: 100%;
    height: .88rem;
    padding: 0 .2rem;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    .header-default {
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 999;
        .header-center{
            width: 100%;
            height: 100%;
            background: skyblue;
            float: left;
            
            .header-center-box{
                height: .72rem;
                margin: 0 1.2rem;
                background: #f7f7f7;
                border-radius: .36rem;
                margin-top: .08rem;
                position: relative;
                overflow: hidden;
                img {
                    .vCenter();
                    left: .92rem;
                }
                input {
                    width: 100%;
                    height: 100%;
                    border: none;
                    outline: none;
                    padding-left: 1.44rem;
                    box-sizing: border-box;
                    font-size: .3rem;
                    color: #c9c9c9;
                }
                .header-title {
                    display: none;
                }
                .header-switch {
                    display: none;
                }
            }
        }
        .header-left {
            width: .56rem;
            height: .56rem;
            float: left;
            margin-left: -100%;
            margin-top: .16rem;
            background: url("./../images/topbar-it666-discern.png") no-repeat;
            background-size: 100% auto;
        }
        .harder-cancle {
            display: none;
        }
        .header-right {
            width: .56rem;
            height: .56rem;
            float: left;
            margin-left: -0.56rem;
            margin-top: .16rem;
            background: url("./../images/topbar-it666-play.png") no-repeat;
            background-size: 100% auto;
        }
    }
    &.active {
        .header-center{
            .header-center-box {
                margin-left: 0;
                margin-right: 2.4rem;
                img {
                    left: .22rem;
                }
                input {
                    padding-left: .74rem;
                }
            }
        }
        .harder-cancle {
            display: inline-block;
            float: left;
            margin-left: -2rem;
            line-height: .88rem;
            a {
                font-size: .32rem;
                color: #333;
                font-weight: 700;
            }
        }
        .header-left {
            display: none;
        }
        .header-right {
            background: url("./../images/topbar-it666-category.png") no-repeat;
            background-size: 100% auto;
        }
    }
    &.video {
        .header-left {
            background: url("./../images/topbar-it666-video.png") no-repeat;
            background-size: 100% auto;
        }
        
    }
    &.me {
        .header-left {
            background: url("./../images/topbar-it666-cloud.png") no-repeat;
            background-size: 100% auto;
        }
        .header-center {
            .header-center-box {
                background: transparent;
                img {
                    display: none;
                }
                input {
                    display: none;
                }
                .header-title {
                    display: block;
                    line-height: .72rem;
                    text-align: center;
                    font-size: .34rem;
                    font-weight: bold;
                    color: #333;
                }
            }
        }
    }
    &.friend {
        .header-left {
            background: url("./../images/topbar-it666-add.png") no-repeat;
            background-size: 100% auto;
        }
        .header-center {
            .header-center-box {
                background: transparent;
                img {
                    display: none;
                }
                input {
                    display: none;
                }
                .header-switch {
                    display: block;
                    width: 2.8rem;
                    height: .58rem;
                    border-radius: .29rem;
                    margin: 0 auto;
                    border: 1px solid #ffcbc8;
                    position: relative;
                    display: flex;
                    overflow: hidden;
                    i{
                        position: absolute;
                        top: 0;
                        left: 0;
                        display: block;
                        width: 1.4rem;
                        height: 100%;
                        background: #fd271b;
                        border-radius: .29rem;

                    }
                    span {
                        display: inline-block;
                        position: relative;
                        z-index: 1;
                        width: 1.4rem;
                        height: 100%;
                        line-height: .58rem;  
                        text-align: center;
                        font-size: .34rem;
                        font-weight: bold;
                        color: #fd271b;
                        &.active {
                            color: #fff;
                        }
                    }
                }
            }
        }
        
    }
    &.account {
        .header-left {
            background: url("./../images/topbar-it666-scan.png") no-repeat;
            background-size: 100% auto;
        }
        .header-center {
            .header-center-box {
                background: transparent;
                img {
                    display: none;
                }
                input {
                    display: none;
                }
            }
        }
    }
    /* 搜索页 */
    .header-container {
        display: none;
        width: 100%;
        height: 11.48rem;
        background: #fff;
        .header-wrapper {
            .search-ad {
                padding-top: .3rem;
                position: relative;
                img {
                    border-radius: .2rem;
                }
                span {
                    position: absolute;
                    top: .4rem;
                    right: .1rem;
                    font-size: .3rem;
                    color: #fff;
                }
            }
            .search-history {
                width: 100%;
                height: 1.95rem;
                box-sizing: border-box;
                overflow: hidden;
                padding: .36rem 0;
                .history-top {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    h6{
                        font-size: .26rem;
                        font-weight: bold;
                        color: #333;
                        line-height: .56rem;
                    }
                    img {
                        width: .56rem;
                        height: .56rem;
                       
                    }
                }
                .history-bottom {
                    list-style: none;
                    width: 100%;
                    white-space: nowrap;
                    /* 水平方向滚动 */
                    overflow-x: scroll;
                    /* 取消滚动条 */
                    /*  
                    注意点:-webkit-scrollbar是webkit内核浏览器的私有属性只有在谷歌浏览器和苹果的浏览器上有效
                     
                    &::-webkit-scrollbar{
                        display: none;
                    }
                    */
                    // 奇淫技巧:可以通过将滚动条挤出父元素的方式来隐藏滚动条
                    padding-bottom: 1rem;
                    li{
                        display: inline-block;
                        font-size: .26rem;
                        color: #333;
                        padding: .14rem .3rem;
                        background: #f8f8f8;
                        border-radius: .33rem;
                        text-align: center;
                        margin-right: .24rem;
                        &:last-child {
                            margin-right: 0;
                        }
                    }
                }
            }
            .search-hot {
                padding: .36rem 0;
                .hot-top {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    h6{
                        font-size: .26rem;
                        font-weight: bold;
                        color: #333;
                        line-height: .56rem;
                    }
                    img {
                        width: .56rem;
                        height: .56rem;
                       
                    }
                }
                .hot-bottom {
                    list-style: none;
                    
                    li {
                        width: 100%;
                        height: 1.34rem;
                        display: flex;
                        justify-content: flex-start;
                        &:nth-of-type(1),&:nth-of-type(2),&:nth-of-type(3) {
                            .hot-left {color: #fd271b;}
                        }
                        .hot-left {
                            width: .54rem;
                            height: 100%;
                            line-height: 1.34rem;
                            font-size: .3rem;
                            color: #666;
                        }
                        .hot-right {
                            p:nth-of-type(1) {
                                padding: .2rem;
                                strong {
                                    font-size: .32rem;
                                    font-weight: bold;
                                    color: #333;
                                }
                                span {
                                    font-size: .26rem;
                                    color: #ccc;
                                    margin: 0 .2rem;
                                }
                                img{
                                    width: auto;
                                    height: .32rem;
                                    position: relative;
                                    top: -0.1rem;
                                } 
                            }
                            p:nth-of-type(2) {
                                font-size: .26rem;
                                color: #666;
                                margin-top: .05rem;
                            }
                        }
                    }
                }
            }
            .search-current {
                display: none;
                width: 100%;
                .current-top {
                    width: 100%;
                    height: 1.1rem;
                    line-height: 1.1rem;
                    font-size: .3rem;
                    color: aquamarine;
                    border-bottom: 1px solid #ccc;
                }
                .current-bottom {
                    li {
                        height: 1.1rem;
                        line-height: 1.1rem;
                        border-bottom: 1px solid #ccc;
                        display: flex;
                        justify-content: flex-start;
                         img {
                            width: .42rem;
                            height: .42rem;
                            margin-right: .1rem;
                            position: relative;
                            top: .33rem;
                        }
                        p {
                            font-size: .3rem;
                            color: #666;
                        } 
                    }
                }
            }
        }
    }
}